<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<script src="../layui/layui.js"></script>
		<style>
			input{
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<form class="layui-form" action="" lay-filter="component-form-element">
			<div align="center" style="margin-top: 100px;">
				<div style="width: 50%;">
					<div>姚源专属奖金计算器</div>
					<input type="text" name="score" lay-verify="number|score" placeholder="请输入期末分数" autocomplete="off" class="layui-input">
					<input type="text" name="rank" lay-verify="rank" placeholder="请输入在班里的排名" autocomplete="off" class="layui-input">
					<button class="layui-btn" lay-submit lay-filter="component-form-element" style="margin-top: 50px;">超级计算</button>
				</div>
			</div>
		</form>
		<script>
			layui.use(['form'], function() {
				var $ = layui.$,
					element = layui.element,
					form = layui.form;
				form.verify({
					score: function(value) {
						if (value < 0) {
							return '不能小于零';
						}
					},
					rank: function(value) {
						var reg = new RegExp("^[0-9]*$");
						if (!reg.test(value)) {
							return '只能填写数字';
						}
						if (value < 0) {
							return '不能小于零';
						}
					},
				});

				form.on('submit(component-form-element)', function(data) {
					var rank = data.field.rank;
					var score = data.field.score;
					var money = (score * score * score * score) / 163047361
					switch (rank) {
						case '5':
							money += 100;
							break;
						case '4':
							money += 100;
							break;
						case '3':
							money *= 2;
							break;
						case '2':
							money *= 3;
							break;
						case '1':
							money *= 4;
							break;
						default:
							break;
					}
					layer.alert("姚源最终获得的奖金是：￥" + money.toFixed(2), {
						title: '最终结果'
					});
					return false;
				});
			});
		</script>
	</body>
</html>
